<template>
	<div class="app-container">
		<div>
      <p class="dialogTitle title">当前地震事件:
        <span v-if="currentEvent">{{ currentEvent.eventName }}</span>
        <span v-else>请在地震事件管理中设置当前地震事件</span>
      </p>
    </div>
    <el-row>
			<el-col :span="8">
				<div style="font-size: 16px;font-weight: bold;">
					人员伤亡评估
				</div>
			</el-col>
		</el-row>	
		<el-row style="margin-top: 20px;margin-bottom: 10px;">
			<!--<el-col :span="4">
				<div style="font-size: 14px;font-weight: bold;">&nbsp;&nbsp;室内外财产损失评估</div>
			</el-col>-->
			<el-col :span="10">
				<el-button type="primary" @click="handleAssess">评估</el-button>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="24">
				<el-table v-loading="loading" :data="dataList"  :span-method="objectSpanMethod" stripe>
					<el-table-column label="省" align="center" prop="province" />
					<el-table-column label="市(州、盟、地区)" align="center" prop="city" />
					<el-table-column label="县(市、旗、区)" align="center" prop="county" />
					<el-table-column label="乡(镇、苏木、街道)" align="center" prop="township" />
					<el-table-column label="行政村(居委会)名称" align="center" prop="village" />
					<el-table-column label="地震烈度" align="center" prop="seismicIntensity" />
					<el-table-column label="死亡人数" align="center" prop="death" />
					<el-table-column label="失踪人数" align="center" prop="missing" />
					<el-table-column label="重伤人数" align="center" prop="badlyInjured" />
					<el-table-column label="轻伤人数" align="center" prop="minorInjury" />
					<el-table-column label="总人口" align="center" prop="totalPerson" />
					<el-table-column label="死亡原因" align="center">
						<template #default="{row}">
							<el-button type="text" @click="viewCauseDeaths(row)">查看</el-button>
						</template>
					</el-table-column>
				</el-table>
				<pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
            @pagination="getDisasterAreasHousesDataList" />
			</el-col>
		</el-row>

		<!-- 死亡原因 -->
		<el-dialog title="死亡原因" v-model="open" width="700px" append-to-body>
			<el-table :data="causeDeathsData" style="margin-top: 20px" stripe>
				<el-table-column label="姓名" align="center" prop="name" />
				<el-table-column label="死亡原因" align="center" prop="causeOfDeath" />
			</el-table>
			<template #footer>
				<div class="dialog-footer">
						<el-button @click="open = false">关 闭</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="personnelCasualties">
	import useEventStore from "@/store/modules/event";
	import { getAllList, getDisasterAreasHousesData, getCauseDeaths } from "@/api/directLossAssess/personnelCasualties.js"
	const { proxy } = getCurrentInstance();
	const dataList = ref([]);
	const loading = ref(true);
	const open = ref(false);
	const total = ref(0);
	const currentEvent = computed(() => useEventStore().currentEvent);
	const data = reactive({
		queryParams: {
			page: 1,
			rows: 50,
			xstmId: undefined,			
		}
	})
	const { queryParams } = toRefs(data)

	// 评估
	function handleAssess() {
		queryParams.value.page = 1;
		getList();
	}

	function getDisasterAreasHousesDataList(){
		loading.value = true;
		getDisasterAreasHousesData({...queryParams.value,xsemId:currentEvent.value?.id}).then(response => {
			dataList.value = response.data.rows ? response.data.rows : [];
			total.value = response.data.total;
			loading.value = false;
		});
	}

	/** 查询数据列表 */
	function getList() {
		getAllList({xsemId:currentEvent.value.id}).then(response => {
			// proxy.$modal.msgSuccess(response.message);
			getDisasterAreasHousesDataList();
		});
	}

	function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
	 if (columnIndex === 0) {
		 const _row = setTable(dataList.value).one[rowIndex];
		 const _col = _row > 0 ? 1 : 0;
		 return {
			 rowspan: _row,
			 colspan: _col
		 };
	 }
	 if (columnIndex === 1 ) {
		 const _row = setTable(dataList.value).two[rowIndex];
		 const _col = _row > 0 ? 1 : 0;
		 return {
		 rowspan: _row,
			 colspan: _col
			};
		}
	 if (columnIndex === 2 ) {
		 const _row = setTable(dataList.value).three[rowIndex];
		 const _col = _row > 0 ? 1 : 0;
		 return {
		 rowspan: _row,
			 colspan: _col
			};
		}
	 if (columnIndex === 3 ) {
		 const _row = setTable(dataList.value).four[rowIndex];
		 const _col = _row > 0 ? 1 : 0;
		 return {
		 rowspan: _row,
			 colspan: _col
			};
		}
}
	function setTable(tableData) {
		 let spanOneArr = [],
		 spanTwoArr = [],
		 spanThreeArr = [],
		 spanFourArr = [],
		 concatOne = 0,
		 concatTwo = 0,
		 concatThree = 0,
		 concatFour = 0;
		 tableData.forEach((item, index) => {
			 if (index === 0) {
				 spanOneArr.push(1);
				 spanTwoArr.push(1);
				 spanThreeArr.push(1);
				 spanFourArr.push(1);
			 } else {
				 if (item.province === tableData[index - 1].province) {
				 //第一列需合并相同内容的判断条件
					 spanOneArr[concatOne] += 1;
					 spanOneArr.push(0);
				 } else {
					 spanOneArr.push(1);
					 concatOne = index;
				 }
				 
				 if (item.city === tableData[index - 1].city) {
				 //第二列和需合并相同内容的判断条件
					 spanTwoArr[concatTwo] += 1;
					 spanTwoArr.push(0);
				 } else {
					 spanTwoArr.push(1);
					 concatTwo = index;
				 }
				 
				 if (item.county === tableData[index - 1].county) {
				 //第三列和需合并相同内容的判断条件
					 spanThreeArr[concatThree] += 1;
					 spanThreeArr.push(0);
				 } else {
					 spanThreeArr.push(1);
					 concatThree = index;
				 }
				 
				 if (item.township === tableData[index - 1].township) {
				 //第四列和需合并相同内容的判断条件
					 spanFourArr[concatFour] += 1;
					 spanFourArr.push(0);
				 } else {
					 spanFourArr.push(1);
					 concatFour = index;
				 }
			 }
		 });
	 	return {
			 one: spanOneArr,
			 two: spanTwoArr,
			 three: spanThreeArr,
			 four: spanFourArr,
	 	};
	}

	let causeDeathsData = ref([]);
	const viewCauseDeaths = (row) => {
		getCauseDeaths({xlrmId:row.xlrmId}).then(res => {
			causeDeathsData.value = res.data
			open.value = true;
		});
	}

	watch(() => currentEvent.value, (value) => {
		if (currentEvent.value?.id) {
			getDisasterAreasHousesDataList();
		}
	}, {deep: true, immediate: true})
</script>

<style scoped lang="scss">
	.title {
		margin: 0 0 20px !important;
	}
</style>